/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { connect, routerRedux } from 'dva';
import moment from 'moment';
import React, { PureComponent } from 'react';

import logo from '../../../assets/busi/userView/logo.png';
import publishPng from '../../../assets/busi/userView/publish.png';
import time from '../../../assets/busi/userView/time.png';
import myStyle from '../index.less';

@connect(({ loading, productStatisticsM }) => ({
  loading,
  productStatisticsM,
}))
export default class ProductStatistics extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      date: moment(new Date()).format('YYYY-MM-DD'),
      statistics: {}, // 统计信息
    };
  }

  UNSAFE_componentWillMount() {
    this.props.dispatch({
      type: 'productStatisticsM/queryProductStatistics',
      payload: {},
      callback: (data) => {
        this.setState({
          statistics: data || {},
        });
      },
    });
  }

  // 跳转到系统管理/产品管理 type 1存续产品 2临近到期 3临近发行
  goToPath = (type) => {
    const productManage = { type };
    if (type == 1) {
      // 【产品状态】选中“存续期”和“清算中”。
      productManage.productStatus = ['0', '5'];
      productManage.endDateStart = moment(new Date()).format('YYYY-MM-DD');
    }
    if (type == 2) {
      // 【到期日区间】结束日期为今天，开始日期从今天往后推30天
      productManage.endDateStart = moment(new Date()).format('YYYY-MM-DD');
      productManage.endDateEnd = moment().add(29, 'day').format('YYYY-MM-DD');
    }
    if (type == 3) {
      // 【起始日区间】开始日期为今天，结束日期为从今天往后推7天
      productManage.startDateStart = moment(new Date()).format('YYYY-MM-DD');
      productManage.startDateEnd = moment().add(7, 'day').format('YYYY-MM-DD');
    }
    // 将条件缓存
    sessionStorage.setItem('productManage', JSON.stringify(productManage));
    // 跳转系统管理/产品管理
    this.props.dispatch(routerRedux.push(`/SystemManagement/productManage`));
  };

  render() {
    const { date, statistics } = this.state;
    return (
      <>
        <div className={myStyle.title}>
          <div>Welcome to MAAT</div>
          <div className={myStyle.dateTime}>{date}</div>
        </div>
        <div className={myStyle.blueDiv}>
          <div>
            <div>
              <img alt='logo' src={logo} />
            </div>
            <div>
              <div>
                存续产品{' '}
                <span
                  style={{ textDecoration: typeof statistics.lastProductNum == 'number' ? '' : 'none' }}
                  onClick={() => {
                    this.goToPath('1');
                  }}
                >
                  {statistics.lastProductNum ?? '--'}
                </span>
                只
              </div>
              <div>
                存续产品规模{' '}
                <span style={{ cursor: 'inherit', textDecoration: typeof statistics.lastProductScale == 'number' ? '' : 'none' }}>
                  {typeof statistics.lastProductScale == 'number' ? statistics.lastProductScale.toFixed(2) : statistics.lastProductScale ?? '--'}
                </span>
                亿元
              </div>
            </div>
          </div>
        </div>
        <div className={myStyle.smallBlue}>
          <img src={time} alt='time' />
          <div>
            临近到期{' '}
            <span
              style={{ textDecoration: typeof statistics.nearExpireProductNum == 'number' ? '' : 'none' }}
              onClick={() => {
                this.goToPath('2');
              }}
            >
              {statistics.nearExpireProductNum ?? '--'}
            </span>
            只
          </div>
        </div>
        <div className={myStyle.smallBlue}>
          <img src={publishPng} alt='publishPng' />
          <div>
            临近发行{' '}
            <span
              style={{ textDecoration: typeof statistics.nearExpireIssueNum == 'number' ? '' : 'none' }}
              onClick={() => {
                this.goToPath('3');
              }}
            >
              {statistics.nearExpireIssueNum ?? '--'}
            </span>
            只
          </div>
        </div>
      </>
    );
  }
}
